<template>
  <div id="pictureDetailPage">
    <a-row :gutter="[16, 16]">
      <!-- 图片预览 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览" class="preview-card">
          <div class="picture-preview-container">
            <a-image :src="picture.url" :preview="{ src: picture.url }" />
            <!-- 添加统计信息 -->
            <div class="image-stats">
              <div class="stat-badge"><EyeOutlined /> {{ formatCount(picture.viewNum) }}</div>
              <div class="stat-badge"><LikeOutlined /> {{ formatCount(picture.thumbNum) }}</div>
              <div class="stat-badge"><StarOutlined /> {{ formatCount(picture.favourNum) }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 图片信息区域 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息" class="info-card">
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="作者">
              <div class="user-info">
                <a-avatar :size="32" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName || '未知用户' }}</div>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="尺寸">
              {{ picture.picWidth ?? '-' }} × {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
            <a-descriptions-item label="主色调">
              <a-space>
                {{ picture.picColor ?? '-' }}
                <div
                  v-if="picture.picColor"
                  :style="{
                    backgroundColor: toHexColor(picture.picColor),
                  }"
                  class="color-sample"
                />
              </a-space>
            </a-descriptions-item>
          </a-descriptions>
          <!-- 图片操作 -->
          <div class="action-buttons">
            <a-button type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button :icon="h(ShareAltOutlined)" type="primary" ghost @click="doShare">
              分享
            </a-button>
            <a-button v-if="canEdit" :icon="h(EditOutlined)" type="default" @click="doEdit">
              编辑
            </a-button>
            <a-button v-if="canDelete" :icon="h(DeleteOutlined)" danger @click="doDelete">
              删除
            </a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>

<script setup lang="ts">
import { computed, h, onMounted, ref } from 'vue'
import { deletePictureUsingPost, getPictureVoByIdUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import {
  DeleteOutlined,
  DownloadOutlined,
  EditOutlined,
  ShareAltOutlined,
  EyeOutlined,
  LikeOutlined,
  StarOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { downloadImage, formatSize, toHexColor } from '@/utils'
import ShareModal from '@/components/ShareModal.vue'
import { SPACE_PERMISSION_ENUM } from '@/constants/space.ts'

interface Props {
  id: string | number
}

const props = defineProps<Props>()
const picture = ref<API.PictureVO>({})

// 通用权限检查函数
function createPermissionChecker(permission: string) {
  return computed(() => {
    return (picture.value.permissionList ?? []).includes(permission)
  })
}

// 定义权限检查
const canEdit = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_EDIT)
const canDelete = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_DELETE)

// 格式化数字显示
const formatCount = (count: number | undefined) => {
  if (!count) return '0'
  return count > 999 ? (count / 1000).toFixed(1) + 'k' : count
}

// 获取图片详情
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
    } else {
      message.error('获取图片详情失败，' + res.data.message)
    }
  } catch (e: any) {
    message.error('获取图片详情失败：' + e.message)
  }
}

onMounted(() => {
  fetchPictureDetail()
  // 确保页面加载时滚动到顶部
  window.scrollTo(0, 0)
})

const router = useRouter()

// 编辑
const doEdit = () => {
  router.push({
    path: '/add_picture',
    query: {
      id: picture.value.id,
      spaceId: picture.value.spaceId,
    },
  })
}

// 删除数据
const doDelete = async () => {
  const id = picture.value.id
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
  } else {
    message.error('删除失败')
  }
}

// 下载图片
const doDownload = () => {
  downloadImage(picture.value.url)
}

// ----- 分享操作 ----
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()
// 分享
const doShare = () => {
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.value.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}
</script>

<style scoped>
#pictureDetailPage {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff6f0, #ffe4d4);
}

:deep(.ant-card) {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

:deep(.ant-card:hover) {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(31, 38, 135, 0.15);
}

:deep(.ant-btn) {
  border-radius: 20px;
  height: 40px;
  transition: all 0.3s ease;
}

:deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #ff9f43, #ff7f50);
  border: none;
}

:deep(.ant-descriptions-item-label) {
  color: #666;
  font-weight: 500;
}

:deep(.ant-tag) {
  border-radius: 12px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 159, 67, 0.3);
  background: rgba(255, 159, 67, 0.1);
}

/* 修改图片预览容器样式 */
.picture-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 60vh; /* 进一步减小高度，从70vh变为60vh */
  overflow: hidden;
  border-radius: 8px;
  position: relative; /* 为统计信息定位做准备 */
}

:deep(.ant-image) {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.ant-image-img) {
  max-width: 100%;
  max-height: 60vh; /* 与容器高度保持一致 */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 美化图片信息框 */
.info-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

:deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 159, 67, 0.2);
}

:deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
  color: #ff9f43;
}

:deep(.ant-descriptions-item-label) {
  color: #666;
  font-weight: 500;
  background: rgba(255, 159, 67, 0.05);
  padding: 8px 12px;
  border-radius: 6px 0 0 6px;
}

:deep(.ant-descriptions-item-content) {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 6px 6px 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

:deep(.ant-avatar) {
  border: 2px solid rgba(255, 159, 67, 0.3);
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

:deep(.ant-btn) {
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #ff9f43, #ff7f50);
  border: none;
}

:deep(.ant-btn-primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 159, 67, 0.3);
}

/* 自定义标签样式 */
:deep(.ant-tag) {
  margin: 4px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255, 159, 67, 0.1);
  border: 1px solid rgba(255, 159, 67, 0.3);
  color: #ff9f43;
}

/* 颜色样本样式 */
.color-sample {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 图片统计信息 */
.image-stats {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.stat-badge {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.stat-badge:hover {
  transform: translateY(-2px);
  background: rgba(255, 159, 67, 0.8);
}
</style>
